<template>
  <div class="container">
    <topSearch
      :form="form"
      :showAdd="checkPermission(['contactsCreate'])"
      @addItem="addItem"
      @searchlist="searchlist"
      @resetform="resetform"
    ></topSearch>

    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        size="small"
      >
        <el-table-column
          prop="name"
          label="联系人"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="email"
          label="email"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="wechat"
          label="微信"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">

            <el-button
              type="text"
              @click="editItem(scope.row)"
              v-if="checkPermission(['contactsUpdate'])"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="deleteTableItem(scope.row)"
              v-if="checkPermission(['contactsDelete'])"
              >删除</el-button
            >
             <el-button
              type="text"
              @click="changeRecord(scope.row)"
              >变更记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
        <follow
      :isshowDialog="followshow"
      :dialogTitle="followTitle"
      @confirm="followconfirm"
      @closedialog="followclose"
      :dialogdata="followData"
    ></follow>
  </div>
</template>

<script type="text/javascript">
import {
  contacts,contactsRead,contactDelete
} from "@/api/contacts";
import subdialog from "./components/dialog";
import checkPermission from "@/utils/permission"; // 权限判断函数
import topSearch from "@/components/topSearch";
import follow from "./components/follow";
export default {
  data() {
    return {
        followshow: false,
      followTitle: "变更记录",
      isshowDialog: false,
      dialogTitle: "新增",
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        state: null,
      },
      tableData: [],
      pagination: {},
      followData: {},
      dialogdata: null,
    };
  },
  components: {
    subdialog,
    topSearch,
    follow
  },
  created() {
    this.getData();
  },
  methods: {
    checkPermission,

    searchlist() {
      (this.page = 1), this.getData();
    },
    resetform() {
      this.getData();
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    followconfirm(){
           this.followshow=false;
    },
    followclose(){
             this.followshow=false;
    },
    //详情
    async getquestionRead(id) {
      let data = await contactsRead({ id: id },true);
      this.dialogdata = data.data;
    },
    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //删除
    async deleteTableItem(val) {
      let data = await contactDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    //编辑
    editItem(val) {
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
      this.getquestionRead(val.id);
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //变更记录
    changeRecord(val){
      this.followshow=true;
       let params = { objectId: val.id, objectType: 4 };
      this.followData = params;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      console.log(params);
      let data = await contacts(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  mounted() {},
};
</script>
<style lang="scss">

  .contentTips{
    line-height: 2.2;
    .title{display: inline-block;width: 50px ; }
    .marginL{
      margin-left: 50px;
    }
    .marginLS{
      margin-left: 10px;
    }
  }
</style>
<style lang="scss" scoped>
::v-deep{
  .tips{
    overflow: hidden;text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 -webkit-text-overflow:ellipsis;
 -moz-text-overflow:ellipsis;
 white-space:nowrap;
  }
  .marginLS{
      margin-left: 10px;
    }

}
</style>
